import React from "react"
import {NavLink} from "react-router-dom"
import $ from "jquery"
import "./../scss/brand.scss";
class brand extends React.Component{
	constructor(props){
		super(props);
		this.state={
			list:[],
			spu:[],
			img:[],
			i:1,
			ccb:false
		}
	}
	btt1(){
		$("#btt1").css({
			borderBottom:"2px solid #f66"
		})
		$('#cott').css('display',"block")
		$('#word').css('display',"none")
		$('#btt2').css({
			border:'0'
		})
	}
	btt2(){
		$("#btt2").css({
			borderBottom:"2px solid #f66"
		})
		$('#cott').css('display',"none")
		$('#word').css('display',"block")
		$('#btt1').css({
			border:'0'
		})
	}
	btt3(){
		var that = this;
		var brandId = location.href.split(':')[2].split('/')[3];
		$.ajax({
			type:"get",
			url:"http://w.lefeng.com/api/neptune/goods/detail_with_stock/v1?needBrandInfo=true&gid="+brandId,
			success:function(data){
				var cb = data.data.goods;
//				console.log(cb.detailImage)
				cb.detailImage.map(function(v){
					console.log(v)
					$('#cott').append("<img src="+v+">")
				})
			}
		});
		$('#btt3').css('display','none');
	}
	componentWillReceiveProps(ccb){
		if(ccb){
			window.location.reload()
		}
	}
	componentDidMount(){
		var that = this;
		var brandId = location.href.split(':')[2].split('/')[3];
		var spuId  =location.href.split(':')[2].split('/')[4];
	function getLocalTime(nS) {     
    	return new Date(parseInt(nS)/1000 * 1000).toLocaleString().substr(0,17)
    	}
		//头部详情
		http://w.lefeng.com/api/neptune/goods/detail_with_stock/v1?needBrandInfo=true&gid=296715645&brandId=800064617
		$.ajax({
			type:"get",
			url:"http://w.lefeng.com/api/neptune/goods/detail_with_stock/v1?needBrandInfo=true&gid="+brandId,
			success:function(data){
//				console.log(data.data.goods)
				var cb = data.data.goods;
//				console.log(cb)
				$('#brandHeader').append("<img src="+cb.allImages[2]+"><p>"+cb.name+"</p><i class='iconfont icon-xin'></i><p class='pric'><strong>￥"+cb.vipshopPrice+"</strong><u>￥"+cb.marketPrice+"</u></p>")		
				that.setState({list:cb.pmsList})
				that.setState({spu:cb.descriptions})
			}
		});
		//商品评论
		$.ajax({
			type:"get",
			url:"http://w.lefeng.com/api/neptune/appraise/count/v1?spuId="+spuId,
			success:function(data){
//				console.log(data.data)
				var arr =data.data;
				$('#spu').append("<p>商品评价<span>("+arr.goodCount+")</span><u>"+arr.greatScale+"好评</u></p>")
			}
		})
			$.ajax({
			type:"get",
			url:"http://w.lefeng.com/api/neptune/appraise/get_appraise_list/v1?page=1&pageSize=3&scoreLevel=0&spuId="+spuId,
			success:function(data){
				var spu = data.data;
				spu.map(function(v){
					var time=getLocalTime(v.postAt);
//					console.log(v)
					$('#spu1').append("<div class='spu2'><p>满意<h4>"+v.authorName+"<span>"+time+"<span></h4></p><p class='con'>"+v.content+"</p></div>")
				})
				
			}
		});
		
		
		//列表页面
			$.ajax({
				type:"get",
				url:"http://w.lefeng.com/api/neptune/handpick_list/v1?stochastic=1&start=1",
				success:function(data){
					that.setState({img:data.data})
					that.setState({ccb:true})
				}
			});
			//上啦加载，下拉刷新
			var list = document.getElementById("list1")
			var iscroll = new IScroll(list,{
	//			mouseWheel: true,
	//			scrollbars: true,
	//			passive: true,
				click:true
			});
			$(document).on('touchend',function(){
			if(iscroll.y > 50){
				console.log(that.state.i)
				that.setState({i:that.state.i+1})
				$.ajax({
					type:"get",
					url:"http://w.lefeng.com/api/neptune/handpick_list/v1?stochastic=1&start="+that.state.i,
					success:function(data){
						console.log(data.data)
						var arr = data.data;
						$("#list1 ul").html('');
						arr.map(function(v){
							var ob = v.goods;
							$("#list1 ul").append("<li><a href=#/brand/"+ob.gid+"/"+ob.vendorProductId+"><img src="+ob.image+" /><p class='tit'><b>"+ob.brandStoreName+"</b><span>"+ob.productName+"</span></p><p class='pri'><strong>￥"+ob.vipshopPrice+"</strong><u>￥"+ob.marketPrice+"</u><i class='iconfont icon-gouwuchekong'></i></p></a></li>")
							iscroll.refresh();
						})
					}
				});
			}
			if(iscroll.y < iscroll.maxScrollY-50){
				that.setState({i:that.state.i+1})
				$.ajax({
					type:"get",
					url:"http://w.lefeng.com/api/neptune/handpick_list/v1?stochastic=1&start="+that.state.i,
					success:function(data){
						var arr = data.data;
						arr.map(function(v){
							var ob = v.goods;
							$("#list1 ul").append("<li><a href=#/brand/"+ob.gid+"/"+ob.vendorProductId+"><img src="+ob.image+" /><p class='tit'><b>"+ob.brandStoreName+"</b><span>"+ob.productName+"</span></p><p class='pri'><strong>￥"+ob.vipshopPrice+"</strong><u>￥"+ob.marketPrice+"</u><i class='iconfont icon-gouwuchekong'></i></p></a></li>")
							iscroll.refresh();
						})
					}
				});
			}
		})
			setInterval(function(){
				iscroll.refresh();
			},1000)
		
	}
		render() {
			var arr = [];
			this.state.list.map(function(v,index){
//				console.log(v)
				arr.push(<p key={index+1}><span>{v.type}</span><u>{v.msg}</u></p>)
			})
			var con = []
			this.state.spu.map(function(v,index){
//				console.log(v)
				con.push(<tr key={index+1}><th>{v.name}</th><td>{v.value}</td></tr>)
			})
			var arr1 = [];
			this.state.img.map(function(v){
				var ob = v.goods;
				arr1.push(<li key={ob.gid}><NavLink to={`/brand/${ob.gid}/${ob.vendorProductId}`}><img src={ob.image} /><p className="tit"><b>{ob.brandStoreName}</b><span>{ob.productName}</span></p><p className="pri"><strong>￥{ob.vipshopPrice}</strong><u>￥{ob.marketPrice}</u><i className="iconfont icon-gouwuchekong"></i></p></NavLink></li>)
			})
			
		return (
			<div id="brand">
				<div id="brandHeader"></div>
				<div id='discount'>{arr}</div>	
				<div id="spu"></div>
				<div id="spu1"></div>
				<div id="deta">
					<div id="btit">
						<button id="btt1" onClick={this.btt1.bind(this)} className="cn">商品信息</button>
						<button id="btt2" onClick={this.btt2} >购物说明</button>
					</div>
					<section id="cott">
					<table><tbody>{con}</tbody></table>
					<button id="btt3" onClick={this.btt3} >点击查看图文详情</button>
					</section>
					<div id="word">
						<h3>关于商品</h3>
						<p>乐蜂网上所售卖的商品均经过品牌授权，确保正品，并由中国人民财产保险股份有限公司为您购买的每一件商品进行承保。</p>
						<h3>商品价格说明</h3>
						<p>乐蜂展示的中间未划横线价格（显示如¥799）为乐蜂销售价，该价格是交易成交价，是您最终决定是否购买商品的依据。</p>
					<p>乐蜂展示的中间划横线价格（显示如￥1399）为参考价，采集自品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价可能会与您购物时展示的不一致。该价格仅供您参考。</p>	
					<p>折扣比为乐蜂销售价与参考价的对比（该值四舍五入后采用小数点后1位，如¥799/¥2899=0.2756=2.8折），该对比值仅供您参考，不作为结算基数。</p>
					<h3>售后说明</h3>
					<p >在您签收商品之日起的7天之内，乐蜂为您提供七天无理由放心退服务，但以下情形将不能退货：</p>
					<p>1、非乐蜂销售的商品，或有明显使用痕迹影响二次销售的商品；</p>
					<p>2、法律明确规定不适用七天无理由退货的商品；</p>
					<p>3、基于安全及健康的考虑，已拆封的食品、药品、保健品、化妆品、贴身用品等；</p>
					<p>4、已经激活的手机、电脑、数码产品等；</p>
					<p>5、已在线交付的充值类商品；</p>
					<p>6、未经授权的维修、误用、碰撞、疏忽、滥用、进液、事故、改动、不正确的安装所造成的商品质量问题，或撕毁、涂改标贴、机器序号、防伪标记；</p>
					<p>7、无法提供商品的发票（如已索要发票）、保修卡等三包凭证或者三包凭证信息与商品不符及被涂改的；</p>
					<p>8、礼包或套装中的商品不可以部分退换货。上述退货规则，客户一经购买，视为认可。</p>
					</div>
				</div>
				<h2>浏览本商品的用户还浏览了</h2>
				<div id="list1">
					<ul>{arr1}</ul>
				</div>
			</div>
		)
	}
}
export default brand;